import QtQuick 2.6
import QtQuick.Layouts 1.1
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4
import QtMultimedia 5.5

import "../../../../Base/UiBase"
import "../../../../Base/Config" as Config
import Code 1.0

Rectangle {
    id: root
    property alias source: audio.source
    radius: 10 * Config.Size.ratio
    color: Config.Color.background

    Audio {
        id: audio
    }

    RowLayout {
        anchors.fill: parent
        spacing: 0
        SvgzImage {
            sourceSize.width: 100 * Config.Size.ratio
            sourceSize.height: 130 * Config.Size.ratio
            source: audio.playbackState === Audio.PlayingState ? "../../../../../resources/evaluation/multi/music/bofang02.svg" : "../../../../../resources/evaluation/multi/music/bofang01.svg"
            MouseArea {
                anchors.fill: parent
                onClicked: audio.playbackState === Audio.PlayingState ? audio.pause(
                                                                            ) : audio.play()
            }
        }
        ColumnLayout {
            Layout.fillWidth: true
            Layout.fillHeight: true
            Layout.margins: 20 * Config.Size.ratio

            Slider {
                Layout.fillWidth: true
                Layout.fillHeight: true

                maximumValue: audio.duration

                value: audio.position
                onValueChanged: {
                    audio.seek(value)
                    value = Qt.binding(function(){return audio.position})
                }

                style: SliderStyle {
                    groove: Rectangle {
                        id: line
                        width: parent.width
                        height: 3 * Config.Size.ratio
                        color: Config.Color.musicPlayer.scrollLine
                    }
                    handle: Rectangle {
                        id: slider
                        width: 25 * Config.Size.ratio
                        height: width
                        radius: width / 2
                    }
                }
            }

            Item {
                Layout.fillWidth: true
                Layout.preferredHeight: playingPositionText.height
                Text {
                    id: playingPositionText
                    anchors.left: parent.left
                    text: Helper.msToReadable(audio.position)
                    font.pixelSize: Config.Size.smallFont
                }
                Text {
                    anchors.right: parent.right
                    text: Helper.msToReadable(audio.duration)
                    font.pixelSize: Config.Size.smallFont
                }
            }
        }
    }
}
